<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .rounded-box {
        background-color: white;
        border-radius: 10px; /* 圆角的大小 */
        padding: 20px; /* 内边距 */
        /*height: 200px; !* 高度 *!*/
        margin: 20px; /* 外边距 */
        position: relative;
    }
    .col-sm-1{
        padding-right: 0px;
        width: 110px;
    }
    .col-sm-4{
        padding-left: 0px;
    }

    .box {
        background-color: white !important;
        border: none;
    }

    .header2 {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .header {
        display: flex;
        padding: 10px;
        background-color: #f8f8f8;
        padding-bottom: 64.44px;
    }

    .header .header_con {
        display: flex;
        align-content: center;
    }

    .header img {
        width: 28%;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        margin-right: 20px;
    }

    .header h1 {
        margin: 0;
        font-size: 24px;
    }

    .header p {
        width: 100%;
        margin: 5px 0;
        color: #666;
    }

    .tab {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .tab li {
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
    }

    .tab li:hover {
        background-color: #ccc;
    }

    .tab li.active {
        background-color: #fff;
        border-bottom: 2px solid #000;
    }

    .nav .nav-link {
        padding: 10px 30px;
    }

    .buttons button {
        margin-left: 3px;
        margin-right: 3px;
    }

    .buttoncon {
        display: flex;
        justify-content: flex-end;
        width: 75%;
    }

    .card {
        width: 100%;
        height: 100%;
    }

    .card_titlecon {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .card_titlel{
            display: flex;
            width: 30%;
        }
    }
    .profile-avatar-container {
        position: relative;
        width: 100px;
        margin: 0 auto;
    }

    .profile-avatar-container .profile-user-img {
        width: 100px;
        height: 100px;
    }

    .profile-avatar-container .profile-avatar-text {
        display: none;
    }

    .profile-avatar-container:hover .profile-avatar-text {
        display: block;
        position: absolute;
        height: 100px;
        width: 100px;
        background: #444;
        opacity: .6;
        color: #fff;
        top: 0;
        left: 0;
        line-height: 100px;
        text-align: center;
    }

    .profile-avatar-container button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        opacity: 0;
    }
</style>
<body>
<div class="rounded-box">
    <div class="header box">
        <div class="header_con">

            <div class="profile-avatar-container ">
                <img class="profile-user-img img-responsive img-circle" src="{$row.portraitimage|cdnurl|htmlentities}" alt="">
                <div class="profile-avatar-text img-circle">点击上传</div>
                <button type="button" id="faupload-portraitimage" class="faupload" data-input-id="{$row.staff_id}" ><i class="fa fa-upload"></i> {:__('Upload')}</button>
            </div>
            <div class="title" style="width: 300px;">
                <h1>{$row.name}</h1>
                <p>  {switch name="$row.type" }
                    {case value="0" }正式工{/case}
                    {case value="1"}退休返聘{/case}
                    {case value="2"}实习生{/case}
                    {case value="3"}派遣工{/case}
                    {/switch} 所属部门：{$job} -{$rank}</p>
                <p>任职岗位：{$rank}  入职时间： {$row.employmenttime}</p>
            </div>
        </div>
        <input type="hidden" id="he" value="{$row.staff_id}">
        <input type="hidden" id="card" value="{$row.cid}">
        <input type="hidden" id="soid" value="{$row.soid}">
        <input type="hidden" id="hid" value="{$row.hid}">
        <div class="buttoncon">
            <div class="buttons">
                <button class="btn btn-primary btn-danger btn-transfer">员工调动</button>
                <button class="btn btn-primary btn-danger btn-resign">办理离职</button>
            </div>
        </div>

    </div>
    <div class=" header2 box">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" href="#information" role="tab" data-toggle="tab" class="nav-link active"
                   aria-current="page">{:__('Information')}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#wages" role="tab" data-toggle="tab">{:__('Wages')}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#messages" role="tab" data-toggle="tab">{:__('Achievements')} </a>
            </li>

        </ul>
    </div>


</div>


<div class="tab-content" id="myTabContent1">
    <div role="tabpanel" class="tab-pane fade in active" id="information">
        <!--        基础信息-->
        <div class="rounded-box">
            <div class="card">
                <div class="card_titlecon">
                    <div class="card_titlel">
                        <svg t="1731739800723" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="4244" width="20" height="20">
                            <path d="M558.6 960.2h-157c-27.5 0-50-22.5-50-50v-795c0-27.5 22.5-50 50-50h157.1c27.5 0 50 22.5 50 50v795.1c-0.1 27.4-22.6 49.9-50.1 49.9z"
                                  p-id="4245" fill="#d81e06"></path>
                        </svg>

                        <p class="text-start">
                            {:__('Information')} </p>
                    </div>
                    <div class="card_titler">
                        <a href="javascript:;" class="staff-edit  btn-disabled disabled {:$auth->check('staff/staff/edit')?'':'hide'}">编辑</a>
                    </div>
                </div>
                <div class="row">
                    <label class="control-label col-xs-1 col-sm-1">{:__('Name')}:</label>
                    <div class="col-xs-6 col-sm-4">
                        {$row.name|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Sex')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.sex}
                    </div>
                </div>

                <div class="row ">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Mobile')}:</label>  
                    <div class="col-xs-12 col-sm-4">  
                        {$row.mobile|htmlentities}
                    </div>

                    <label class="control-label col-xs-6 col-sm-1">{:__('Idcard')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.idcard|htmlentities}
                    </div>
                </div>
                <div class="row ">

                    <label class="control-label col-xs-6 col-sm-1">{:__('Datebirth')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.datebirth}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Maritalstatus')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.maritalstatus}
                    </div>
                </div>

                <div class="row">

                    <label class="control-label col-xs-6 col-sm-1">{:__('Politicaloutlook')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.politicaloutlook|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Education')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.education|htmlentities}
                    </div>
                </div>
                <div class="row">

                    <label class="control-label col-xs-6 col-sm-1">{:__('Nativeplace')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.nativeplace|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1" >{:__('Location')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.location|htmlentities}
                    </div>
                </div>
                <div class="row">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Nation')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.nation|htmlentities}
                    </div>

                    <label class="control-label col-xs-6 col-sm-1">{:__('Workingyears')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.workingyears|htmlentities}
                    </div>
                </div>
            </div>
        </div>
        <!--        基础信息 end-->
        <!--        员工状态 start-->
        <div class="rounded-box">
            <div class="card">
                <div class="card_titlecon">
                    <div class="card_titlel">
                        <svg t="1731739800723" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="4244" width="20" height="20">
                            <path d="M558.6 960.2h-157c-27.5 0-50-22.5-50-50v-795c0-27.5 22.5-50 50-50h157.1c27.5 0 50 22.5 50 50v795.1c-0.1 27.4-22.6 49.9-50.1 49.9z"
                                  p-id="4245" fill="#d81e06"></path>
                        </svg>

                        <p class="text-start">
                            {:__('Employeestatus')}</p>
                    </div>
                    <div class="card_titler">
                    </div>
                </div>
                <div class="row">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Type')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {switch name="$row.type" }
                        {case value="0" }正式工{/case}
                        {case value="1"}退休返聘{/case}
                        {case value="2"}实习生{/case}
                        {case value="3"}派遣工{/case}
                        {/switch}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Probationperiod')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.probationperiod|htmlentities}
                    </div>
                </div>
                <div class="row ">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Employmenttime')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.employmenttime|date='Y-m-d H:i:s',###}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Siling')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.siling|htmlentities}
                    </div>
                </div>
                <div class="row ">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Confirmationtime')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.confirmationtime}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Signingtime')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.signingtime}
                    </div>
                </div>

                <div class="row">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Contractimage')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {:__('Click_down')}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Expirationtime')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.expirationtime|date='Y-m-d H:i:s',###}
                    </div>
                </div>
                <div class="row">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Number of signings')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.numberofsignings|htmlentities}
                    </div>
                </div>
            </div>
        </div>
        <!--        员工状态 end-->
        <!--        在职信息 start-->
        <div class="rounded-box">
            <div class="card">
                <div class="card_titlecon">
                    <div class="card_titlel">
                        <svg t="1731739800723" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="4244" width="20" height="20">
                            <path d="M558.6 960.2h-157c-27.5 0-50-22.5-50-50v-795c0-27.5 22.5-50 50-50h157.1c27.5 0 50 22.5 50 50v795.1c-0.1 27.4-22.6 49.9-50.1 49.9z"
                                  p-id="4245" fill="#d81e06"></path>
                        </svg>

                        <p class="text-start">
                            {:__('On the job')}</p>
                    </div>
                    <div class="card_titler">
                    </div>
                </div>
                <div class="row">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Staffcode')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.staffcode|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Shop_name')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$shopname|htmlentities}
                    </div>
                </div>
                <div class="row ">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Rank')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$rank|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Jobgrade')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$job}
                    </div>
                </div>
                <div class="row ">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Department')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$shopname|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('角色')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.staff_rank_name|htmlentities}
                    </div>
                </div>
            </div>

        </div>
        <!--        在职信息 end-->
    </div>
    <div role="tabpanel" class="tab-pane fade" id="wages">
        <!--        工资卡信息 start-->
        <div class="rounded-box">
            <div class="card">
                <div class="card_titlecon">
                    <div class="card_titlel">
                        <svg t="1731739800723" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="4244" width="20" height="20">
                            <path d="M558.6 960.2h-157c-27.5 0-50-22.5-50-50v-795c0-27.5 22.5-50 50-50h157.1c27.5 0 50 22.5 50 50v795.1c-0.1 27.4-22.6 49.9-50.1 49.9z"
                                  p-id="4245" fill="#d81e06"></path>
                        </svg>

                        <p class="text-start">
                            {:__('Salary card')}</p>
                    </div>
                    <div class="card_titler">
                        <a href="javascript:;" data-shade="0.1" class="card-edit btn-disabled disabled {:$auth->check('staff/card/edit')?'':'hide'}">编辑</a>
                    </div>
                </div>
                <div class="row">
                    <label class="control-label col-xs-6 col-sm-1">{:__('BankName')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.bankName|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Bankcard')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.bankcard|htmlentities}
                    </div>
                </div>

                <div class="row ">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Openingbank')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.openingbank|htmlentities}
                    </div>
                </div>
            </div>
        </div>
        <!--        工资卡信息 end-->
        <!--        社保信息 start-->
        <div class="rounded-box">
            <div class="card">
                <div class="card_titlecon">

                    <div class="card_titlel">
                    <svg t="1731739800723" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="4244" width="20" height="20">
                        <path d="M558.6 960.2h-157c-27.5 0-50-22.5-50-50v-795c0-27.5 22.5-50 50-50h157.1c27.5 0 50 22.5 50 50v795.1c-0.1 27.4-22.6 49.9-50.1 49.9z"
                              p-id="4245" fill="#d81e06"></path>
                    </svg>

                    <p class="text-start">
                        {:__('Social security')} </p>
                    </div>
                    <div class="card_titler">
                        <a href="javascript:;" class="social-edit btn-disabled disabled {:$auth->check('staff/social/edit')?'':'hide'}">编辑</a>
                    </div>
                </div>
                <div class="row">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Account')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.account|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Startingpaymentmonth')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.startingpaymentmonth|htmlentities}
                    </div>
                </div>

                <div class="row ">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Level')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.level|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Base')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.base|htmlentities}
                    </div>
                </div>
                <div class="row ">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Insuredplace')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.insuredplace|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('status')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {switch name="$row.status" }
                        {case value="0" } {:__('Stop')}{/case}
                        {case value="1"}{:__('start')}{/case}
                        {/switch}
                    </div>
                </div>
            </div>
        </div>
        <!--        社保信息 end-->
        <!--        公积金信息 start-->
        <div class="rounded-box">
            <div class="card">
                <div class="card_titlecon">
                    <div class="card_titlel">
                        <svg t="1731739800723" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="4244" width="20" height="20">
                            <path d="M558.6 960.2h-157c-27.5 0-50-22.5-50-50v-795c0-27.5 22.5-50 50-50h157.1c27.5 0 50 22.5 50 50v795.1c-0.1 27.4-22.6 49.9-50.1 49.9z"
                                  p-id="4245" fill="#d81e06"></path>
                        </svg>

                        <p class="text-start">
                            {:__('Accumulation fund')}</p>
                    </div>
                    <div class="card_titler">
                        <a href="javascript:;" class="housing-edit btn-disabled disabled {:$auth->check('staff/housing/edit')?'':'hide'}">编辑</a>
                    </div>
                </div>
                <div class="row">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Accumulation Account')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.accumulation_account|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Accumulation Startingpaymentmonth')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.accumulation_startingpaymentmonth|htmlentities}
                    </div>
                </div>

                <div class="row ">
                    <label class="control-label col-xs-6 col-sm-1">{:__('Accumulation Base')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.accumulation_base|htmlentities}
                    </div>
                    <label class="control-label col-xs-6 col-sm-1">{:__('Accumulation Placepayment')}:</label>
                    <div class="col-xs-12 col-sm-4">
                        {$row.accumulation_placepayment|htmlentities}
                    </div>
                </div>
            </div>
        </div>
        <!--        公积金信息 end-->
        <!-- 薪资信息 start-->
        <div class="rounded-box">
            <div class="card">
                <div class="card_titlecon">
                    <div class="card_titlel">
                        <svg t="1731739800723" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="4244" width="20" height="20">
                            <path d="M558.6 960.2h-157c-27.5 0-50-22.5-50-50v-795c0-27.5 22.5-50 50-50h157.1c27.5 0 50 22.5 50 50v795.1c-0.1 27.4-22.6 49.9-50.1 49.9z"
                                  p-id="4245" fill="#d81e06"></path>
                        </svg>

                        <p class="text-start">
                            {:__('Salary fund')}</p>
                    </div>

                </div>
                <div class="panel panel-default panel-intro">
                    {:build_heading()}

                    <div class="panel-body">
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade active in" id="one">
                                <div class="widget-body no-padding">
                                    <div id="toolbar" class="toolbar">
                                        {:build_toolbar('refresh')}

<!--                                        <a href="{:url('staff/salary/add', ['staff_id' => $row['staff_id']])}"  class="btn btn-success btn-add {:$auth->check('staff/salary/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>-->
                                        <a href="javascript:;"    class="btn btn-success btn-add {:$auth->check('staff/salary/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>

                                    </div>
                                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                                           data-operate-edit="{:$auth->check('staff/salary/edit')}"
                                           width="100%">
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 薪资信息 end-->
    </div>
    <div role="tabpanel" class="tab-pane fade" id="messages">
            <div class="panel-body">
                <div id="myTabContent2" class="tab-content">
                    <div class="tab-pane fade active in" id="two">
                        <div class="widget-body no-padding">
                            <div id="toolbar1" class="toolbar1">
                                {:build_toolbar('refresh')}
                                <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('staff/salary/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                            </div>
                            <table id="table1" class="table table-striped table-bordered table-hover table-nowrap"
                                   data-operate-edit="{:$auth->check('staff/salary/edit')}"
                                   width="100%">
                            </table>
                        </div>
                    </div>

                </div>
            </div>

    </div>

</div>


</body>

</html>
